<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="<c:url value="/css/jquery.Jcrop.css"/>"/> 
		<script type="text/javascript" src="<c:url value="/js/jquery.Jcrop.js" />"></script>
		<link rel="stylesheet" type="text/css" href="<c:url value="/css/register.css" />" /> 
		<script type="text/javascript" src="<c:url value="/js/register.js" />"></script>	
</head>
<body>
<div class="bbody">

    <!-- upload form -->
    <form id="upload_form" enctype="multipart/form-data" method="POST" action="<c:url value="/MemberUpdate.controller" />" onsubmit="return checkForm()">
        <!-- hidden crop params -->
        <table>
     <tr>
		<td>帳號 : </td>
		<td><span name="account" >${user.account}</span></td>
		<td>${errors.account}</td>
	</tr>
    <tr>
		<td>真實姓名 : </td>
		<td><input type="text" name="name" value="${user.name}"></td>
		<td>${errors.name}</td>
	</tr>
	<tr>
		<td>顯示暱稱 : </td>
		<td><input type="text" name="nickname" value="${user.nickname}"></td>
		<td>${errors.nickname}</td>
	</tr>
	<tr>
		<td>身高 : </td>
		<td><input type="text" name="hight" value="${user.hight}"></td>
		<td>${errors.hight}</td>
	</tr>	
	<tr>
		<td>居住地 : </td>
		<td><select name="region">
		<option value="基隆">基隆</option>
		<option value="台北">台北</option>
		<option value="桃園">桃園</option>
		<option value="新竹">新竹</option>
		<option value="苗粟">苗粟</option>
		<option value="台中">台中</option>
		<option value="南投">南投</option>
		<option value="嘉義">嘉義</option>
		<option value="台南">台南</option>
		<option value="高雄">高雄</option>
		<option value="屏東">屏東</option>
		<option value="宜蘭">宜蘭</option>
		<option value="花蓮">花蓮</option>
		<option value="台東">台東</option>
		<option value="外島">外島地區</option>
		</select></td>
		<td>${errors.region}</td>
	</tr>	
     <tr>
		<td>感情狀態 : </td>
		<td><select name="state">
		<option value="單身">單身</option>
		<option value="已婚">已婚</option>
		<option value="喪偶">喪偶</option>
		<option value="一言難盡">一言難盡</option>
		</select></td>
		<td>${errors.state}</td>
	</tr>	
	<tr>
		<td>抽菸 : </td>
		<td><input type="radio" id="dont" name="play" value="false">不抽</td>
		<td><input type="radio" id="do" name="play" value="true">抽</td>
		<input type="hidden" id="play" value="${user.play}"/>
		<td>${errors.play}</td>
	</tr>	
	<tr>
		<td>興趣 : </td>
		<td><input type="checkbox" name="ball" value="true">球類</td>
		<td><input type="checkbox" name="run" value="true">跑步</td>
		<td><input type="checkbox" name="reading" value="true">閱讀</td>
		<td><input type="checkbox" name="swim" value="true">游泳</td><br>
		<td><input type="checkbox" name="movie" value="true">電影</td>
		<td><input type="checkbox" name="singing" value="true">唱歌</td>
		<td><input type="checkbox" name="bike" value="true">單車</td>
		<td><input type="checkbox" name="tvgame" value="true">電玩</td>
		<td></td>
	</tr>
	</table>
       
	<h4  style="float:left;">更新您的大頭照</h4><br>
      
       <div>
        <input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div>
      <div class="error"></div>
     <input type="hidden" id="x1" name="x1" />
        <input type="hidden" id="y1" name="y1" />
        <input type="hidden" id="x2" name="x2" />
        <input type="hidden" id="y2" name="y2" />
        <div class="step2">
            <h5>可以選擇您要的大小、範圍</h5>
            <img id="preview" />

            <div class="info">
                <label>File size</label> <input type="text" id="filesize" name="filesize" />
                <label>Type</label> <input type="text" id="filetype" name="filetype" />
                <label>Image dimension</label> <input type="text" id="filedim" name="filedim" />
                <label>W</label> <input type="text" id="w" name="w" />
                <label>H</label> <input type="text" id="h" name="h" />
            </div>
            <input type="submit" name="inp" value="update" />
        </div>
    </form>
</div>
</body>
</html>